.login-bg{
	background:url(../images/loginPic01-quiet.jpg) center center no-repeat;
	background-size:100% 100%;
	height:100%;
	overflow:Hidden;
	position:relative;
}
.login-info{
	background:#e58629;
	width:830px;
	height:85px;
	border-radius:5px;
	box-shadow:0 0 2px rgba(0, 0, 0, .3);
	margin:0 auto;
	position:absolute;
	top:41%;
	left:50%;
	margin-top:-15px;
	margin-left:-415px;
	z-index:2;
}
.login-systemName{
	position:absolute;
	top:30%;
	width:100%;
}
.login-systemName img{
	margin:0 auto;
	display:block;
}
@media screen and (max-width: 1920px){
	.login-systemName img{width:500px;height:60px;}
}
@media screen and (max-width: 1680px){
	.login-systemName img{width:500px;height:60px;}
}
@media screen and (max-width: 1600px){
	.login-systemName img{width:500px;height:60px;}
}
@media screen and (max-width: 1366px){
	.login-systemName img{width:400px;height:48px;}
}
@media screen and (max-width: 1360px){
	.login-systemName img{width:400px;height:48px;}
}
.login-logo{
    position:absolute;
    top:17%;
    width:100%;
}
.login-logo img{
	margin:0 auto;
	display:block;
}
@media screen and (max-width: 1920px){
	.login-logo img{width:622px;height:75px;}
}
@media screen and (max-width: 1680px){
	.login-logo img{width:622px;height:75px;}
}
@media screen and (max-width: 1600px){
	.login-logo img{width:622px;height:75px;}
}
@media screen and (max-width: 1366px){
	.login-logo img{width:497px;height:60px;}
}
@media screen and (max-width: 1360px){
	.login-logo img{width:497px;height:60px;}
}
.login-info .input-info{
	width:78%;
	position:absolute;
	top:20px;
	left:30px;
}
.login-info .input-info .text{
    height:50px;
	line-height:50px;
	width:49%;
	display:inline-block;
		
}
.login-info .input-info .text label{
	background:#f7941d;
	border-radius:5px 0 0 5px;
	height:45px;
	width:50px;
	float:left;
}
.login-info .input-info .text label img{margin:7px 0 0 10px}
.login-info .input-info .text input[type="text"],
.login-info .input-info .text input[type="password"]{
	width:230px;
	height:45px;
	line-height:45px;
	color:#999;
	font-size:14px;
	border:0;
	border-radius:3px;
	box-shadow:2px 2px 2px rgba(0, 0, 0, 0.3) inset;
	text-indent:5px;
}
.login-info .input-info label{
	font-size:18px;
	color:#fff;
}
.login-info .btn{
	display:inline-block;
	position:absolute;
	top:20px;
	right:50px;
	width:110px;
	height:45px;
	line-height:45px;
	text-align:center;
	background:#f7941d;
	border:1px solid #a76414;
	border-radius:5px;
	box-shadow:0 0 5px rgba(255, 255, 255, .7) inset;
}
.login-info .btn:hover{background:#fd8a00;}
.login-info .btn a{
	font-size:20px;
	color:#fff;
	text-decoration:none;
	text-shadow:2px 2px 2px rgba(19, 46, 1, 0.4);
	display:block;
}

/* 云 */
.sky {
  height: 300px;
  background: transparent;
  overflow: hidden;
  -webkit-animation: sky_background 70s ease-out infinite;
  -moz-animation: sky_background 70s ease-out infinite;
  -o-animation: sky_background 70s ease-out infinite;
  animation: sky_background 70s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sky .clouds_one {
  background: url("../images/cloud_one.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sky .clouds_two {
  background: url("../images/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sky .clouds_three {
  background: url("../images/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes sky_background {
  0% {background: transparent}
  50% {background: transparent}
  100% {background: transparent}
}
@-moz-keyframes sky_background {
  0% {background: transparent}
  50% {background: transparent}
  100% {background: transparent}
}
@keyframes sky_background {
  0% {background: transparent}
  50% {background: transparent}
  100% {background: transparent}
}

@-webkit-keyframes cloud_one {
  0% {left: 0}
  100% {left: -200%}
}
@-moz-keyframes cloud_one {
  0% {left: 0}
  100% {left: -200%}
}
@keyframes cloud_one {
  0% {left: 0}
  100% {left: -200%}
}

@-webkit-keyframes cloud_two {
  0% {left: 0}
  100% {left: -200%}
}
@-moz-keyframes cloud_two {
  0% {left: 0}
  100% {left: -200%}
}
@keyframes cloud_two {
  0% {left: 0}
  100% {left: -200%}
}

@-webkit-keyframes cloud_three {
  0% {left: 0}
  100% {left: -200%}
}
@-moz-keyframes cloud_three {
  0% {left: 0}
  100% {left: -200%}
}
@keyframes cloud_three {
  0% {left: 0}
  100% {left: -200%}
}

/* 汽车   */
.AnimationLayer{
	width:1040px;
	height:500px;
	position:absolute;
	left:50%;
	margin-left:-490px;
	bottom:0;
	overflow:hidden;
	z-index:1;
}
.car{
	position:absolute;
	z-index:20;
	animation:car_drive 6s ease-in infinite;
}
.car .car-body{
	background:url(../images/loginPicCar01.png) 0 0 no-repeat;
	width:187px;
	height:108px;
	position:absolute;
}

/* @-webkit-keyframes car_drive{
	0%{left:120px;top:185px;transform: scale(.0,.0)}
	5%{left:150px;top:185px;transform: scale(.3,.3)}
	11%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	12%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	13%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	15%,20%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	50%{left:280px;top:210px;transform: scale(1,1)}
	100%{left:820px;top:500px;transform: scale(2,2)}
}
@-ms-keyframes car_drive{
	0%{left:120px;top:185px;transform: scale(.0,.0)}
	5%{left:150px;top:185px;transform: scale(.3,.3)}
	11%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	12%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	13%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	15%,20%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	50%{left:280px;top:210px;transform: scale(1,1)}
	100%{left:820px;top:500px;transform: scale(2,2)}
}
@-o-keyframes car_drive{
	0%{left:120px;top:185px;transform: scale(.0,.0)}
	5%{left:150px;top:185px;transform: scale(.3,.3)}
	11%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	12%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	13%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	15%,20%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
	50%{left:280px;top:210px;transform: scale(1,1)}
	100%{left:820px;top:500px;transform: scale(2,2)}
} */
@media screen and (max-width: 1920px){
	.car .car-body{background-size:100% 100%}
	@keyframes car_drive{
		0%{left:120px;top:185px;transform: scale(.0,.0)}
		5%{left:150px;top:185px;transform: scale(.3,.3)}
		11%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		12%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		13%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		15%,20%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		50%{left:280px;top:210px;transform: scale(1,1)}
		100%{left:820px;top:500px;transform: scale(2,2)}
	}
}
@media screen and (max-width: 1680px){
	.car .car-body{background-size:100% 100%}
	@keyframes car_drive{
		0%{left:180px;top:200px;transform: scale(.0,.0)}
		5%{left:210px;top:200px;transform: scale(.3,.3)}
		11%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		12%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		13%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		15%,20%{left:280px;top:210px;transform: scale(.5,.5);transform:rotate(0deg)}
		50%{left:280px;top:210px;transform: scale(1,1)}
		100%{left:820px;top:500px;transform: scale(2,2)}
	}
}
@media screen and (max-width: 1600px){
	.car .car-body{background-size:80% 80%}
	@keyframes car_drive{
		0%{left:190px;top:245px;transform: scale(.0,.0)}
		5%{left:210px;top:245px;transform: scale(.3,.3)}
		11%{left:305px;top:260px;transform: scale(.5,.5);transform:rotate(0deg)}
		12%{left:305px;top:260px;transform: scale(.5,.5);transform:rotate(0deg)}
		13%{left:305px;top:260px;transform: scale(.5,.5);transform:rotate(0deg)}
		15%,20%{left:305px;top:260px;transform: scale(.5,.5);transform:rotate(0deg)}
		50%{left:305px;top:260px;transform: scale(1,1)}
		100%{left:830px;top:500px;transform: scale(2,2)}
	}
}
@media screen and (max-width: 1366px){
	.car .car-body{background-size:80% 80%}
	@keyframes car_drive{
		0%{left:230px;top:290px;transform: scale(.0,.0)}
		5%{left:260px;top:290px;transform: scale(.3,.3)}
		11%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		12%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		13%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		15%,20%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		50%{left:380px;top:320px;transform: scale(1,1)}
		100%{left:820px;top:500px;transform: scale(2,2)}
	}
}
@media screen and (max-width: 1360px){
	.car .car-body{background-size:80% 80%}
	@keyframes car_drive{
		0%{left:230px;top:290px;transform: scale(.0,.0)}
		5%{left:260px;top:290px;transform: scale(.3,.3)}
		11%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		12%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		13%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		15%,20%{left:380px;top:320px;transform: scale(.5,.5);transform:rotate(0deg)}
		50%{left:380px;top:320px;transform: scale(1,1)}
		100%{left:820px;top:500px;transform: scale(2,2)}
	}
}


/* 车牌识别相机   */
.camera{
	position:relative;
}
.camera > .L-machine{
	background:url(../images/loginPic10.png) center center no-repeat;
	width:230px;
	height:245px;
	position:absolute;
	z-index:11;
}
@media screen and (max-width: 1920px){
	.camera > .L-machine{
	   right:200px;
	   top:130px;
	   background-size:100% 100%;
	}
}
@media screen and (max-width: 1680px){
	.camera > .L-machine{
	   right:200px;
	   top:140px;
	   background-size:100% 100%;
	}
}
@media screen and (max-width: 1600px){
	.camera > .L-machine{
	   right:280px;
	   top:165px;
	   background-size:80% 80%;
	}
}
@media screen and (max-width: 1366px){
	.camera > .L-machine{
	   right:180px;
	   top:230px;
	   background-size:75% 75%;
	}
}
@media screen and (max-width: 1360px){
	.camera > .L-machine{
	   right:225px;
	   top:220px;
	   background-size:70% 70%;
	}
}
/* 车牌识别相机闪光灯   */
.camera > .lights{
	background:url(../images/loginPic09.png) center center no-repeat;
	width:245px;
	height:150px;
	-webkit-animation:light_discern 6s 1.5s linear forwards infinite;
	-ms-animation:light_discern 6s 1.5s linear forwards infinite;
	-o-animation:light_discern 6s 1.5s linear forwards infinite;
	animation:light_discern 6s 1.5s linear forwards infinite; 
    opacity:0;
    position:absolute;
    z-index:12;
}
@media screen and (max-width: 1920px){
	.camera > .lights{
	   right:340px;
       top:120px;
       background-size:100% 100%;
	}
}
@media screen and (max-width: 1680px){
	.camera > .lights{
	   right:350px;
       top:145px;
       background-size:100% 100%;
	}
}
@media screen and (max-width: 1600px){
	.camera > .lights{
	   right:400px;
	   top:170px;
	   background-size:90% 90%;
	}
}
@media screen and (max-width: 1366px){
	.camera > .lights{
	   right:290px;
	   top:240px;
	   background-size:90% 90%;
	}
}
@media screen and (max-width: 1360px){
	.camera > .lights{
	   right:335px;
	   top:240px;
	   background-size:90% 90%;
	}
}
/* @-webkit-keyframes light_discern{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: 1;}
	17%{opacity: 0;}
	19%{opacity: 1;}
	21%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@-ms-keyframes light_discern{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: 1;}
	17%{opacity: 0;}
	19%{opacity: 1;}
	21%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@-o-keyframes light_discern{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: 1;}
	17%{opacity: 0;}
	19%{opacity: 1;}
	21%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
} */
@keyframes light_discern{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: 1;}
	17%{opacity: 0;}
	19%{opacity: 1;}
	21%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}

/* 道闸   */
.barrier{
    position:relative;
}
.barrier > .P-machine{
	background:url(../images/loginPic05.png) center center no-repeat;
	width:58px;
	height:140px;
	position:absolute;
	z-index:13;
}
@media screen and (max-width: 1920px){
	.barrier > .P-machine{
	   right:250px;
	   top:210px;
	   background-size:100% 100%;
	}
}
@media screen and (max-width: 1680px){
	.barrier > .P-machine{
	   right:250px;
	   top:210px;
	   background-size:100% 100%;
	}
}
@media screen and (max-width: 1600px){
	.barrier > .P-machine{
	   right:330px;
	   top:240px;
	   background-size:80% 80%;
	}
}
@media screen and (max-width: 1366px){
	.barrier > .P-machine{
	   right:240px;
	   top:300px;
	   background-size:70% 70%;
	}
}
@media screen and (max-width: 1360px){
	.barrier > .P-machine{
	   right:280px;
	   top:295px;
	   background-size:70% 70%;
	}
}
.barrier > .pole{
	background:url(../images/loginPic06.png) 0 0 no-repeat;
	width:270px;
	height:25px;
	position:absolute;
	z-index:14;
	-webkit-animation:playPole 6s 2.5s linear forwards infinite;
	-ms-animation:playPole 6s 2.5s linear forwards infinite;
	-o-animation:playPole 6s 2.5s linear forwards infinite;
	animation:playPole 6s 2.5s linear forwards infinite;
	
}
@media screen and (max-width: 1920px){
	.barrier > .pole{
	   left:520px;
	   top:220px;
	   transform-origin:87% 100%;
	   background-size:100% 100%;
	}
}
@media screen and (max-width: 1680px){
	.barrier > .pole{
	   left:520px;
	   top:220px;
	   transform-origin:87% 100%;
	   background-size:100% 100%;
	}
}
@media screen and (max-width: 1600px){
	.barrier > .pole{
	   left:490px;
	   top:260px;
	   transform-origin:67% 100%;
	   background-size:80% 80%;
	}
}
@media screen and (max-width: 1366px){
	.barrier > .pole{
	   left:605px;
	   top:330px;
	   transform-origin:60% 100%;
	   background-size:70% 70%;
	}
}
@media screen and (max-width: 1360px){
	.barrier > .pole{
	   left:540px;
	   top:325px;
	   transform-origin:68% 100%;
	   background-size:80% 80%;
	}
}
/* @-webkit-keyframes playPole{
	0%{transform:rotate(0deg)}
	5%{transform:rotate(0deg)}
	30%{transform:rotate(90deg)}
	50%{transform:rotate(90deg)}
	60%{transform:rotate(0deg)}
	100%{transform:rotate(0deg)}
}
@-moz-keyframes playPole{
	0%{transform:rotate(0deg)}
	5%{transform:rotate(0deg)}
	30%{transform:rotate(90deg)}
	50%{transform:rotate(90deg)}
	60%{transform:rotate(0deg)}
	100%{transform:rotate(0deg)}
}
@-o-keyframes playPole{
	0%{transform:rotate(0deg)}
	5%{transform:rotate(0deg)}
	30%{transform:rotate(90deg)}
	50%{transform:rotate(90deg)}
	60%{transform:rotate(0deg)}
	100%{transform:rotate(0deg)}
} */
@keyframes playPole{
	0%{transform:rotate(0deg)}
	5%{transform:rotate(0deg)}
	30%{transform:rotate(90deg)}
	50%{transform:rotate(90deg)}
	60%{transform:rotate(0deg)}
	100%{transform:rotate(0deg)}
}
/* 地感线   */
.induction{
	position:relative;
}
.induction > .line{
	-webkit-animation:line_flash 6s linear infinite;
	-ms-animation:line_flash 6s linear infinite;
	-o-animation:line_flash 6s linear infinite;
	animation:line_flash 6s linear infinite;
	background:#fff;
	transform:rotate(-130deg);
	transform:skew(65deg, 0deg);
	opacity: 0;
	position:absolute;
}
@media screen and (max-width: 1920px){
	.induction > .line{
	    width:220px;
	    height:20px;
		left:280px;
		top:300px;
	}
}
@media screen and (max-width: 1680px){
	.induction > .line{
		width:220px;
	    height:20px;
		left:280px;
		top:300px;
	}
}
@media screen and (max-width: 1600px){
	.induction > .line{
	    width:220px;
	    height:20px;
		left:280px;
		top:330px;
	}
}
@media screen and (max-width: 1366px){
	.induction > .line{
	    width:190px;
	    height:20px;
		left:390px;
		top:390px;
	}
}
@media screen and (max-width: 1360px){
	.induction > .line{
	    width:190px;
	    height:20px;
		left:390px;
		top:390px;
	}
}
/* @-webkit-keyframes line_flash{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: .1;}
	17%{opacity: 0;}
	19%{opacity: .1;}
	23%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@-moz-keyframes line_flash{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: .1;}
	17%{opacity: 0;}
	19%{opacity: .1;}
	23%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@-o-keyframes line_flash{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: .1;}
	17%{opacity: 0;}
	19%{opacity: .1;}
	23%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
} */
@keyframes line_flash{
	0%{opacity: 0;}
	5%{opacity: 0;}
	13%{opacity: 0;}
	15%{opacity: .1;}
	17%{opacity: 0;}
	19%{opacity: .1;}
	23%{opacity: 0;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}